<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饱了吗</title>
    <link href="./../images/favico.ico" rel="icon">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./../js/base.js"></script>
    <!--element-ui的样式-->
    <link href="../../backend/plugins/element-ui/index.css" rel="stylesheet" />
    <!--引入vant样式-->
    <link href="../styles/vant.min.css" rel="stylesheet" />
    <!-- 引入样式  -->
    <link href="../styles/index.css" rel="stylesheet" />
    <!--本页面内容的样式-->
    <link href="./../styles/register.css" rel="stylesheet" />
</head>

<body>
    <div id="register">
        <el-page-header @back="goLogin" content="注册" class="divHead">
        </el-page-header>

        <!-- 输入框部分 -->
        <div class="divContainer">
            <el-input prefix-icon="el-icon-mobile-phone
            " placeholder="请输入手机号" v-model="form.phone" class="phone" maxlength='11' @blur="checkPhones">
            </el-input>
            <div class="divSplit"></div>
            <div class="divMsg" v-if="phoneFlag">手机号码输入不正确，请重新输入</div>

            <!-- 密码 -->
            <el-input prefix-icon="el-icon-lock
            " placeholder="请输入密码（设置6至20位字母、数字和符号组合）" type="password" v-model="form.password" class="password" minlength='6' maxlength="20" @blur="checkPwd">
            </el-input>
            <div class="divSplit"></div>
            <div class="divMsg" v-if="pwdFlag">请设置6至20位字母、数字和符号组合</div>

            <!-- 确认密码 -->
            <el-input prefix-icon="el-icon-lock
            " placeholder="请再次输入密码" type="password" v-model="repwd" class="repwd" minlength='6' maxlength="20" @blur="reCheckPwd">
            </el-input>
            <div class="divSplit"></div>
            <div class="divMsg" v-if="repwdFlag">两次输入的密码不一致</div>

            <!-- 验证邮箱 -->
            <!-- <el-input prefix-icon="el-icon-message
            " placeholder="请输入邮箱" v-model="mail" class="mail" @blur="checkMail">
                <el-button slot="append" type="primary" @click="getCode">发送验证码</el-button>
            </el-input>
            <div class="divSplit"></div>
            <div class="divMsg" v-if="mailFlag">邮箱输入错误</div> -->

            <!-- 验证码 -->
            <!-- <el-input prefix-icon="el-icon-check
            " placeholder="请输入验证码" v-model="code" class="code" @blur="checkCode">
            </el-input>
            <div class="divSplit"></div>
            <div class="divMsg" v-if="codeFlag">验证码输入错误</div> -->


        </div>
        <el-button type="warning" round class="btnSubmit" :plain="true" @click="submitRes">注册</el-button>


    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../backend/plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../backend/plugins/element-ui/index.js"></script>
    <!-- 引入vant样式 -->
    <script src="../js/vant.min.js"></script>
    <!-- 引入axios -->
    <script src="../../backend/plugins/axios/axios.min.js"></script>
    <script src="../js/request.js"></script>
    <script src="../api/register.js"></script>
</body>

<script>
    const vm = new Vue({
        el: '#register',
        data: {
            form: {
                phone: '',
                password: '',
            },
            repwd: '',
            phoneFlag: false,
            pwdFlag: false,
            repwdFlag: false,
            // mailFlag: false,
            // codeFlag: false
        },
        methods: {
            goLogin() {
                window.location.href = './login.html'
            },
            // 判断输入的手机号是否正确
            checkPhones() {
                //判断输入的手机号是否正确
                // console.log(this);
                let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
                if (reg.test(this.form.phone)) {
                    // console.log('wrong')
                    this.phoneFlag = false

                } else {
                    this.phoneFlag = true

                }
            },
            // 验证密码
            checkPwd() {
                // console.log(11)
                // 开始验证  正则  1. 定义规则  2. 检测  
                let reg = /^[a-zA-Z0-9-_]{6,20}$/
                if (reg.test(this.form.password)) {
                    this.pwdFlag = false

                } else {
                    this.pwdFlag = true

                }
            },
            // 再次输入密码验证
            reCheckPwd() {
                if (this.repwd === this.form.password) {
                    this.repwdFlag = false
                } else {
                    this.repwdFlag = true


                }
            },
            // checkMail() {
            //     //判断输入的邮箱地址是否正确
            //     const regex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            //     //判断输入的手机号是否正确
            //     if (regex.test(this.mail)) {
            //         this.mailFlag = false
            //             //this.form.code = (Math.random()*1000000).toFixed(0)
            //     } else {
            //         this.mailFlag = true
            //     }
            // },
            // // 发送代码
            // getCode() {
            //     // this.form.code = ''
            //     //判断输入的邮箱地址是否正确
            //     const regex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            //     if (regex.test(this.mail)) {
            //         this.mailFlag = false
            //             //this.form.code = (Math.random()*1000000).toFixed(0)
            //         sendMsgApi({
            //             mail: this.mail
            //         })
            //     } else {
            //         this.mailFlag = true


            //     }
            // },
            // 判断验证码是否为空
            // checkCode() {
            //     const reg = /^[0-9]+.?[0-9]*/;
            //     if (this.code === '' || reg.test(this.code)) {
            //         this.codeFlag = false
            //     } else {
            //         this.codeFlag = true
            //     }
            // },
            // 判断全部成功与否，成功可以跳转
            async submitRes(e) {
                // 全部为false
                if (this.form.phone === '' || this.phoneFlag === true) {
                    e.preventDefault()
                    this.$message({
                        showClose: true,
                        message: '输入有误，请重新输入',
                        type: 'error'
                    });
                } else if (this.form.password === '' || this.pwdFlag === true) {
                    e.preventDefault()
                    this.$message({
                        showClose: true,
                        message: '输入有误，请重新输入',
                        type: 'error'
                    });
                } else if (this.repwd === '' || this.repwdFlag === true) {
                    e.preventDefault()
                    this.$message({
                        showClose: true,
                        message: '输入有误，请重新输入',
                        type: 'error'
                    });

                } else {
                    if (this.form.phone && this.form.password && this.repwd) {
                        const res = await registerApi(this.form)
                        if (res.code === 1) {
                            sessionStorage.setItem('userPhone', this.form.phone)
                            this.$message({
                                showClose: true,
                                message: '注册成功',
                                type: 'success'
                            });
                            setTimeout(function() {
                                window.location.href = './login.html'
                            }, 3500)
                        } else {
                            this.$notify({
                                type: 'warning',
                                message: '当前手机号码已存在,请重新填写'
                            });

                        }


                    }

                }
            }

        }
    });
</script>

</html>